<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">

    <h:head>
        <meta http-equiv="Cache-control" content="no-cache"/>
        <meta http-equiv="Expires" content="-1"/>
        <title>Atlas</title>
        <!--        <script type="text/javascript" src="media/scripts/ddpowerzoomer.js"></script>-->
        <link rel="stylesheet" type="text/css" href="media/styles/grid.css"  />
        <link rel="stylesheet" type="text/css" href="media/css/style.css"  />
        <link rel='stylesheet prefetch' href='media/css/photoswipe.css'/>

        <link rel='stylesheet prefetch' href='media/css/default-skin.css'/>
        <link rel="stylesheet" href="media/css/style_photo.css" media="screen" type="text/css" />
        <link rel="stylesheet" type="text/css" href="media/css/font-awesome/css/font-awesome.min.css"/>
    </h:head>
    <h:body>
        <style>
            html{
                background-color: black;
                color: #fff;

            }
            .top-menu-left li.categories a {
                display: inline-block;
                height: 13px;
                padding-bottom: 7px;
                padding-left: 20px;
                padding-right: 20px;
                padding-top: 11px;
                position: relative;
            }
            .bg_form{
                background-attachment: scroll;
                background-clip: border-box;
                background-color: #000;
                padding-top: 50px;
            }
            .pswp__button, .pswp__button--arrow--left:before, .pswp__button--arrow--right:before {
                background: none !important;
            }
            .pswp__button{
                color: white;
            }
            #formAnnex:cropper{
                margin: 0 auto;
            }
        </style>
        <h:form id="formAnnex" class="bg_form">
            <p:messages autoUpdate="true" />

            <div class="pswp__counter">

            </div>

            <div class="pswp__top-bar" style="z-index: 50">
                
                <p:commandButton styleClass="pswp__button fa fa-rotate-right fa-lg" title="Girar à direita"  value=""
                                 actionListener="#{viewImage.rotateImageDireta()}" process="@this" update="@form"/>

                <p:commandButton styleClass="pswp__button fa fa-rotate-left fa-lg" title="Girar à Esquerda" value=""
                                 actionListener="#{viewImage.rotateImageEsquerda()}" process="@this" update="@form"/>

                <p:commandButton rendered="#{!viewImage.cortando}"  styleClass="pswp__button fa fa-crop fa-lg" 
                                 title="Cortar Imagem"  actionListener="#{viewImage.ativaCrop()}" 
                                 process="@form" update="@form"
                                 value=""/>

                <p:commandButton rendered="#{viewImage.cortando}"  styleClass="pswp__button fa fa-crop fa-lg" 
                                 title="Cortar"  actionListener="#{viewImage.crop()}" 
                                 process="@form" update="@form" oncomplete="window.location.assign(document.referrer)"
                                 value="">
                </p:commandButton>

                <p:commandButton styleClass="pswp__button fa fa-arrow-left fa-lg" title="Voltar" 
                                 process="@this" update="@this"
                                 value="" onclick="window.location.assign(document.referrer)"/>

            </div>
            <div style="width: 100%; text-align: center;">

                <h2 style="display: #{viewImage.cortando ? 'block':'none'}">Selecione a àrea para cortar</h2>
                <div class="clearfix" style="margin-left: 10%; width: 80%;">

                    <p:imageCropper rendered="#{viewImage.cortando and viewImage.anexo.id ne null}"  id="cropper" value="#{viewImage.croppedImage}" 
                                    initialCoords="1,1,1,1" 
                                    image="#{viewImage.requestURL}/imagens/#{viewImage.url}" />
                </div>

                <p:graphicImage id="gi" rendered="#{!viewImage.cortando}" cache="false" 
                                url="#{viewImage.requestURL}/imagens/#{viewImage.url}"/>
                <p:draggable for="gi" />
            </div>

        </h:form>


    </h:body>
</html>
